<template>
  <div class="pad-out-box new-table-style relative-box">
    <option-list ref="option"></option-list>

    <el-table :border="false" stripe :data="tableData">
      <el-table-column align="left" label="负责人">
        <template slot-scope="scope">
          {{ scope.row.organizationName ? scope.row.organizationName + '-' + scope.row.processorName : scope.row.processorName }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="事件数量" prop="workNum"> </el-table-column>
      <el-table-column align="left" label="按时完成数量" prop="finishOnTimeNum"> </el-table-column>
      <el-table-column align="left" label="逾期数量" prop="overdueNum"> </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
  </div>
</template>
<script>
  import { workRankList } from '../../api/workTrace';
  import optionList from './components/optionList';
  import workTrace from '../../mixin/workTrace';
  export default {
    mixins: [workTrace],

    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
      };
    },

    mounted() {
      this.getDataSource();
    },

    methods: {
      async getDataSource(more) {
        let res = await workRankList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('more');
      },
    },

    components: { optionList },
  };
</script>
